@extends('layouts.ad')

@section('css')
<style>
@keyframes up {
    0.00% {transform: translate3d(0, 0, 0) scale(0);}
    100.00% {transform: translate3d(0, -30vh, 0) scale(1.0002);margin-top: 32vh;}
}
@keyframes springish {
    0.00% {transform: translate3d(100.00px, 0, 0) scale(0);margin-top: 4.5vh;}
    10.16% {transform: translate3d(-41.06px, 0, 0) scale(1.4106);margin-top: 4vh;}
    21.39% {transform: translate3d(16.09px, 0, 0) scale(0.8391);margin-top: 3.5vh;}
    32.62% {transform: translate3d(-6.31px, 0, 0) scale(1.0631);margin-top: 3vh;}
    43.85% {transform: translate3d(2.47px, 0, 0) scale(0.9753);margin-top: 2.5vh;}
    55.08% {transform: translate3d(-0.97px, 0, 0) scale(1.0097);margin-top: 2vh;}
    66.31% {transform: translate3d(0.38px, 0, 0) scale(0.9962);margin-top: 1.5vh;}
    77.54% {transform: translate3d(-0.15px, 0, 0) scale(1.0015);margin-top: 1vh;}
    88.77% {transform: translate3d(0.06px, 0, 0) scale(0.9994);margin-top: 0.5vh;}
    100.00% {transform: translate3d(-0.02px, 0, 0) scale(1.0002);margin-top: 0;}
  }
.container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #44a551;
}
.container .img {
  width: 100vw;
  height: 68.464768vh;
  vertical-align: bottom;
}
.container .body {
  width: 100vw;
  height: 31.535232vh;
  background: #44a551;
  text-align: center;
  color: #fff;
}
.container .body .question {
  font-size: 9.6vw;
  margin-top: 4.5vh;
  animation: 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms springish forwards;
}
.container .body .answer {
  margin-top: 50vh;
  animation: 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms up forwards;
}
.container .body .answer .slogn {
  line-height: 4.797601vh;
  width: 69.333333vw;
  height: 4.797601vh;
  margin: 1.49925vh auto;
  border: 2px solid #fff;
  border-radius: 2.398801vh;
}
.container .body .answer .brand {
  width: 21.1089994vw;
  height: 4.997001vh;
}
</style>
@endsection

@section('content')
<div class="container">
    <img class="img">
    <div class="body">
      <div class="question question-end">
        <div class="question1"></div>
        <div class="question2"></div>
      </div>
      <div class="answer">
        <div class="slogn"></div>
        <img class="brand" src="http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/3q8k1n9WvXDdEWKMavQKpvybYAkWR2jOfRHhDjDZ.png">
      </div>
    </div>
  </div>
@endsection

@section('scripts')
<script>
$(function() {
    $.get('https://mall.hellogreens.cn/api/js/config', { request_url: 'https://mall.hellogreens.cn/index_advertising' }, function(data){
      data = JSON.parse(data.data);
      wx.config(data);
      wx.ready(function(){
      wx.onMenuShareTimeline({
          title: '你好菜 果蔬生鲜',
          imgUrl: 'http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/QpmAK82pfNC3ilFnZOeZowQSWAg0Lr6KyTA8D3Ie.jpeg',
      })
      wx.onMenuShareAppMessage({
        title: '你好菜 果蔬生鲜',
        desc: '果蔬生鲜 配送到家',
        imgUrl: 'http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/QpmAK82pfNC3ilFnZOeZowQSWAg0Lr6KyTA8D3Ie.jpeg',
      });
});

    })
    $.get('https://nihaocai.zkong.me/api/configs_by_group/advertising', function(data) {
        data = JSON.parse(data.data.index_advertising);
        $('.img').attr('src', data.img);
        $('.question1').text(data.question1);
        $('.question2').text(data.question2);
        setTimeout(function() {
        $('.question1').text(data.answer1);
        $('.question2').text(data.answer2);
        }, 1800);
        $('.slogn').text(data.slogn);
    });
});
</script>
@endsection